<template>
    <el-dialog :visible.sync="detailsDialogVisible" width="60%" :fullscreen="isMobileScreen" transition="dialog-fade">
        <section class="column">
            <h3 class="dialog-title">用户详情</h3>
           
                <!-- 资质信息部分 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>资质信息：</span>
                    </div>
                    <div class="text item">
                        <div v-if="selectedRow">
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>姓名:</strong> {{ selectedRow.realName }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>年龄:</strong> {{ selectedRow.age }}岁</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>性别:</strong> {{ selectedRow.sex === '1' ? '男' : '女' }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>手机号:</strong> {{ selectedRow.tmobile }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>省份:</strong> {{ selectedRow.province }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>城市:</strong> {{ selectedRow.city }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>学历:</strong> {{ selectedRow.xueli }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>工作:</strong> {{ selectedRow.gongzuo }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>薪资:</strong> {{ selectedRow.shouru }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>贷款金额:</strong> {{ selectedRow.loanAmount }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>贷款时间:</strong> {{ selectedRow.loanTime }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>贷款用途:</strong> {{ selectedRow.yongtu }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>芝麻分数:</strong> <span :style="getTextColor(selectedRow.zhima)">{{
                                        selectedRow.zhima }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>花呗:</strong> <span :style="getTextColor(selectedRow.huabei)">{{
                                        selectedRow.huabei }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>白条:</strong> <span :style="getTextColor(selectedRow.baitiao)">{{
                                        selectedRow.baitiao }}</span></p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>房产:</strong> <span :style="getTextColor(selectedRow.house)">{{
                                        selectedRow.house }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>车产:</strong> <span :style="getTextColor(selectedRow.car)"> {{
                                        selectedRow.car }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>社保:</strong> <span :style="getTextColor(selectedRow.shebao)">{{
                                        selectedRow.shebao }}</span></p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>商业保险:</strong> <span :style="getTextColor(selectedRow.baoxian)"> {{
                                        selectedRow.baoxian }}</span> </p>
                                </div>
                                <div class="detail-item">
                                              <p><strong>公积金:</strong> <span :style="getTextColor(selectedRow.gjj)">{{
                                        selectedRow.gjj }} </span> </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>是否逾期:</strong> {{ selectedRow.yuqi }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                  
                                    <p><strong>微粒花:</strong> <span :style="getTextColor(selectedRow.weili)">{{
                                        selectedRow.weili }}</span> </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>信用卡:</strong> <span :style="getTextColor(selectedRow.xinyongka)">{{
                                        selectedRow.xinyongka }} </span></p>
                                </div>
                                <div class="detail-item">
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <p>该用户尚未上传资质信息。</p>
                        </div>
                    </div>
                </el-card>
           
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDetailsDialog">关闭</el-button>
            </span>

        </section>
    </el-dialog>
</template>



<style scoped>
.column {
    display: flex;
    flex-direction: column;
    height: 100%;

}

/* 原始样式 */
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}


.detail-item {
    flex: 1;
    margin-right: 20px;
}

.dialog-footer {
    /* position: absolute; */
    right: 20px;
    /* 可以调整按钮与弹窗右侧的距离 */
    bottom: 20px;
    /* 可以调整按钮与弹窗底部的距离 */
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}


.dialog-title {
    text-align: center;
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 10px;
    /* 用户详情标题的样式，您可以根据需要进行调整 */
}

</style>




<script>
import { listNumberTemp } from "@/api/source/numberTemp";
export default {
    name: "member",
    computed: {
        isMobileScreen() {
            return window.innerWidth <= 768;
        }
    },
    data() {
        return {
            detailsDialogVisible: false, // 弹窗可见状态
            selectedRow: {}
        };
    },
    methods: {

        /**更改创建时间格式 */
        formatTimestamp(timestamp) {
            if (!timestamp) {
                return '';
            }
            const date = new Date(timestamp);
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
            return formattedDate;
        },
        getTextColor(text) {
            if (text && typeof text === 'string') {
                return text.includes('无') ? 'color: red;' : 'color: black;';
            }
            return 'color: black;';
        },
        async show(id) {
            try {
                const [ sourceCardInfoResponse] = await Promise.all([
                listNumberTemp({ id })
                ]);

                // 处理资质接口的数据
                this.selectedRow = sourceCardInfoResponse.rows[0];
              
                // 显示弹窗
                this.detailsDialogVisible = true;
            } catch (error) {
                console.error("Error fetching details:", error);
                this.$message.error("Failed to fetch details information.");
            }
        },
        closeDetailsDialog() {
            this.selectedRow = {};
            this.detailsDialogVisible = false;
        },
    }

};
</script>
  